<template>
	<view class="pgood">
		<view class="title">
			{{title}}
		</view>
		<view class="list1">
			<view class="cell" v-for="(item,index) in list" :key="index">
				<view class="cell-main">
					<view class="card">
						<view class="card-top">
							<image class="card-img" :src="item.spuImg" mode="aspectFill"></image>
						</view>
						<view class="card-bottom">
							<view class="titles">
								{{item.spuTitle}}
							</view>
							<view class="flex">
								<view class="message">
									已省{{(item.spuOriginalPrice - item.spuPrice)/100}}元
								</view>
							</view>
							<view class="zprice">
								<view>
									<view class="price">
										<text>￥</text>
										<text>{{item.spuPrice | spuPriceFirst}}</text>
										<text>.{{item.spuPrice | spuPriceLast}}</text>
									</view>
									<text class="orgin">￥{{item.spuOriginalPrice/100}}</text>
								</view>
								<view>
									<image class="cart" src="../../static/button.png" mode="aspectFill" @click="jiarugwBtn(item)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dowm">
				{{finishText}}
			</view>
		</view>
	</view>
</template>

<script>
	import item from './item.vue'
	import mixi from '../data/index.js'
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => []
			},
			finishText: {
				type: String,
				default: ''
			}
		},
		mixins: [mixi],
		filters: {
			spuPriceFirst(val) {
				const item = (val / 100).toString().split('.')
				console.log(item)
				return item[0]
			},
			spuPriceLast(val) {
				const item = (val / 100).toString().split('.')
				return item[1]?item[1]:'00'
			}
		},
		components: {
			item
		}
	}
</script>

<style lang="scss" scoped>
	.pgood {
		background-color: #2AAB34;
		width: 750rpx;
		margin: 40rpx auto 0 auto;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 20rpx;
		color: #FFFFFF;

		.title {
			font-size: 18px;
			line-height: 80rpx;
			font-weight: bold;
		}

		.list1 {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.cell {
				padding-bottom: 20rpx;
				width: 50%;
				box-sizing: border-box;

				&:nth-child(odd) {
					padding-right: 10rpx;
				}

				&:nth-child(even) {
					padding-left: 10rpx;
				}

				&-main {
					width: 100%;
					background-color: #FFFFFF;
					border-radius: 20rpx;
				}

				.card {
					width: 100%;
					background-color: #F7F7F7;
					box-sizing: border-box;
					border-radius: 20rpx;
					overflow: hidden;

					&-top {
						position: relative;
						padding: 10rpx 10rpx 0 10rpx;

						.zekou {
							position: absolute;
							bottom: 8rpx;
							right: 10rpx;
							background-color: #36B542;
							padding: 5rpx 15rpx;
							border-top-left-radius: 25rpx;
							color: #FFFFFF;
							font-size: 12px;
						}
					}

					&-img {
						width: 100%;
						height: 332rpx;
						border-top-left-radius: 15rpx;
						border-top-right-radius: 15rpx;
					}

					&-bottom {
						padding: 5rpx 10rpx;

						.titles {
							font-size: 14px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							color: #000000;
							margin-top: 10rpx;
						}

						.zprice {
							margin-top: 15rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #36B542;
							padding-bottom: 10rpx;

							.price {
								text {
									&:first-child {
										font-size: 13px;
									}

									&:nth-child(2) {
										font-size: 29px;
										font-weight: bold;
									}

									&:nth-child(3) {
										font-size: 17px;
										font-weight: bold;
									}
								}
							}

							.cart {
								width: 196rpx;
								height: 70rpx;
								position: relative;
								top: 20rpx;
							}
						}
					}
				}
			}
		}

		.orgin {
			color: #999999;
			text-decoration: line-through;
			font-size: 12px;
		}

		.dowm {
			width: 100%;
			padding: 30rpx 0;
			display: flex;
			justify-content: center;
			color: #FFFFFF;
			font-size: 14px;
			align-items: center;

			image {
				margin-left: 10rpx;
				width: 40rpx;
			}
		}

		$bg:#36B542;

		.message {
			min-width: 140rpx;
			background-color: $bg;
			border-bottom-color: $bg;
			color: #000000;
			font-size: 11px;
			line-height: 18px;
			padding: 7rpx 25rpx;
			box-sizing: border-box;
			border-radius: 15px;
			position: relative;
			word-break: break-all;
			margin: 15rpx 0 0rpx 10rpx;
			color: #FFFFFF;
			text-align: center;

			&::before {
				content: '';
				position: absolute;
				bottom: 12rpx;
				left: 50%;
				width: 15rpx;
				height: 15rpx;
				// border-radius: 5rpx;
				margin-bottom: -8px;
				background: inherit;
				/*自动继承父元素的背景*/
				transform: translateX(-50%) rotate(58deg);
			}
		}
	}
</style>
